<template>
  <div>
    <page-loading
      :loading.sync="pageLoading"
      :error.sync="pageError"
      @reload="init"
    >
      <space-info
        :user-info="userInfo"
        :follow-data="followData"
        :beliked="beLiked"
      />

      <ul class="tabs">
        <li
          v-for="tab in tabs"
          :key="tab.id"
          :class="{active: tab.component === currentTab}"
          @click="switchTab(tab)">{{tab.name}}</li>
      </ul>

      <template>
        <keep-alive>
          <component :is="currentComponent" v-bind="comProps" v-on="comEvents"></component>
        </keep-alive>
      </template>

    </page-loading>
  </div>
</template>

<script>
import PageLoading from '@/components/page-loading/PageLoading.vue'
import pageLoadingMixin from '@/mixins/pageLoading'
import SpaceInfo from '@/components/space/SpaceInfo.vue'
import SpacePosts from '@/components/space/SpacePosts.vue'
import SpaceVideos from '@/components/space/SpaceVideos.vue'
import SpacePhotos from '@/components/space/SpacePhotos.vue'
import { apiGetUserInfo, apiGetUserStat, apiGetUserUpStat } from '@/api/space.js'
export default {
  name: 'Space',
  components: {
    PageLoading,
    SpaceInfo,
    SpacePosts,
    SpaceVideos,
    SpacePhotos
  },
  inject: ['rootRouter'],
  mixins: [pageLoadingMixin],
  metaInfo () {
    return {
      title: this.title,
      meta: [
        { name: 'keywords', content: this.keywords },
        { name: 'description', content: this.title }
      ]
    }
  },
  props: {
    mid: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      userId: this.mid,
      followData: null,
      beLiked: 0,
      userInfo: null,
      currentTab: 'Posts',
      tabs: [
        {
          id: 1,
          name: '动态',
          component: 'Posts'
        },
        {
          id: 2,
          name: '视频',
          component: 'Videos'
        },
        {
          id: 3,
          name: '相薄',
          component: 'Photos'
        }
      ]
    }
  },
  computed: {
    hasInfo () {
      return this.userInfo !== null
    },
    title () {
      let word = '哔哩哔哩移动版'
      if (this.hasInfo) {
        word = `${this.userInfo.name}-${word}`
      }
      return word
    },
    keywords () {
      let word = '哔哩哔哩,在线视频,哔哩哔哩动画,弹幕,个人空间'
      if (this.hasInfo) {
        word = `${this.userInfo.name},${word}`
      }
      return word
    },
    currentComponent () {
      return `Space${this.currentTab}`
    },
    comProps () {
      const params = {
        mid: this.userId
      }
      return params
    },
    comEvents () {
      return {

      }
    }
  },
  created () {
    this.init()
  },
  watch: {
    mid: {
      handler (newVal) {
        this.userId = newVal
      }
    },
    userId: {
      handler (newVal) {
        this.init()
      }
    }
  },
  methods: {
    init () {
      this.getUserInfo()
      this.getUserStat()
      this.getUserUpStat()
    },
    getUserInfo () {
      apiGetUserInfo({
        mid: this.userId
      }).then(res => {
        const { code, data } = res
        if (code === 0 && data !== null) {
          this.userInfo = data
        } else {
          this.pageError = true
        }
      }).catch(err => {
        console.log(err)
        // this.pageError = true
        this.rootRouter.replace({ name: '404' })
      }).finally(() => {
        this.pageLoading = false
      })
    },
    // 获取粉丝和关注数
    getUserStat () {
      apiGetUserStat({
        mid: this.userId
      }).then(res => {
        const { code, data } = res
        if (code === 0 && data !== null) {
          this.followData = data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取 获赞数
    getUserUpStat () {
      apiGetUserUpStat({
        mid: this.userId
      }).then(res => {
        const { code, data } = res
        if (code === 0 && data !== null) {
          this.beLiked = data.likes
        }
      }).catch(err => {
        console.log(err)
      })
    },
    switchTab (tab) {
      this.currentTab = tab.component
    }
  }
}
</script>

<style lang="scss" scoped>
  .tabs {
    height: rem(40px);
    line-height: rem(40px);
    @include border1px(#e7e7e7, 1px 0);
    box-sizing: border-box;
    font-size: 0;
    padding-left: rem(12px);
    li{
      display: inline-block;
      margin-right: rem(32px);
      font-size: rem(13px);
      color: $color-text-regular;
      &.active{
        color: $theme-color;
      }
    }
  }
</style>
